<template>
	<div class="w-100%">
<!--		详情顶部-->
		<div class="top">
			<el-card shadow="never" style="width: 1200px;margin: 0 auto">
				<AnimeItemInfo :itemInfo="state.info" @user-header="userHeader"></AnimeItemInfo>
			</el-card>
		</div>
		<div class="w-1200px" style="margin: 0 auto">
			<AnimeAssemble :chapterList="state.chapterList" :itemId="state.id"></AnimeAssemble>
		</div>
		<div class="w-1200px" style="margin: 0 auto">
			<el-row :gutter="20">
				<el-col :span="16">
					<AnimelComment @comment-info="userComment" :commentsList="state.commentList" :itemid="state.id"></AnimelComment>
				</el-col>
				<el-col class="w-884px;h-428px" :span="8">
					 <HotTextComponents title="收藏最多" :hot-list="state.hotList" type="collect"></HotTextComponents>
					 <HotTextComponents title="评分最高" :hot-list="state.ratingsList" type="rating"></HotTextComponents>
				</el-col>
			</el-row>
		</div>
		<el-dialog
			v-model="state.dialogVisible"
			title="沟通信息"
			width="50%"
			draggable
		>
			<el-form
				ref="ruleFormRef"
				:rules="rules"
				:model="state.feedbackFrom"
				label-width="auto"
				style="max-width: 600px"
			>
				<el-form-item label="姓名" prop="moniker">
					<el-input v-model="state.feedbackFrom.moniker" />
				</el-form-item>
				<el-form-item label="微信号" prop="wchat">
					<el-input v-model="state.feedbackFrom.wchat" />
				</el-form-item>
				<el-form-item label="手机号" prop="mobile">
					<el-input v-model.number="state.feedbackFrom.mobile" />
				</el-form-item>
				<el-form-item label="简历" prop="content">
					<el-upload
						drag
						:action="state.imgPath"
						multiple
						:on-success="handleAvatarSuccess"
					>
						<el-icon class="el-icon--upload"><upload-filled /></el-icon>
						<div class="el-upload__text">
							<em>拖拽或者点击上传 </em>
						</div>
						<template #tip>
							<div class="el-upload__tip">只能上传 pdf或者word格式</div>
						</template>
					</el-upload>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="feedbackBtn(ruleFormRef)">提交</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<script setup lang="ts">
import { useRoute} from 'vue-router'
const ruleFormRef = ref<FormInstance>()
import type { FormInstance, FormRules } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import AnimeItemInfo from '~/components/info/AnimeItemInfo.vue'
import AnimelComment from '~/components/comment/AnimelComment.vue'
import HotTextComponents from '~/components/hot/HotTextComponents.vue'
import router from '~/plugins/router'
import AnimeAssemble from '~/components/assemble/AnimeAssemble.vue'
const { params } = useRoute()
const UserLogin = userLogin()
const route = useRoute();
const rules = reactive<FormRules>({
	moniker: [
		{
			required: true,
			message: '姓名不能为空',
			trigger: 'change',
		},
	],
	wchat: [
		{
			required: true,
			message: '微信号不能为空',
			trigger: 'change',
		},
	],
	mobile: [
		{
			required: true,
			message: '手机号不能为空',
			trigger: 'change',
		},
	],
	content: [
		{
			required: true,
			message: '简历不能为空',
			trigger: 'change',
		},
	],
})
const state = reactive({
	chapterList:[],
	hotList:[],
	ratingsList:[],
	commentList:[],
	imgPath: '',
	dialogVisible: false,
	id: params.id,
	info: {},
	viewList: [],
	collect: '收藏',
	feedbackFrom: {
		moniker: '',
		wchat: '',
		mobile: '',
		content: '',
		itemId: params.id,
	},
})
// 深度监听 route.params 对象
watch(
	() => route.params,
	(newParams, oldParams) => {
		if (newParams.id !== oldParams.id) {
		 state.id = newParams.id
			init()
			window.scrollTo({
				top: 0,
				behavior: 'smooth' // 平滑滚动
			});
		}
	},
	{ deep: true }
);

/**
 * 阅读
 * @param data
 */
function userHeader() {
	router.push({path:"/itemInfo/header",query:{itemId: params.id,chapter:1}});
}
function userComment(data:any) {
	data.itemId = state.id;
	http.post("/comment", data).then(res => {
		init()
		toast.success("评论成功！")
	})
}


/**
 * 文件上传
 * @param response
 * @param uploadFile
 */
const handleAvatarSuccess: UploadProps['onSuccess'] = (
	response,
) => {
	state.feedbackFrom.content = response.data.url
}
/**
 * 沟通提交
 * @param formEl
 */
const feedbackBtn = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			console.log(state.feedbackFrom)
			http.post('/feedback/save', state.feedbackFrom).then(() => {
				toast.success('提交成功，再到处看看吧！')
				state.dialogVisible = false
			})
		}
	})
}
/**
 * 初始化
 */
function init() {
	http.get(`/item/${state.id}`).then((res) => {
		state.info = res.data
	})
	http.get(`/item/like?type=collect&sum=10`).then((res) => {
		state.hotList = res.data
	})
	http.get(`/item/like?type=ratings&sum=10`).then((res) => {
		state.ratingsList = res.data
	})

	http.get(`/comment/${state.id}`).then((res) => {
		state.commentList = res.data
	})

	http.get(`chapter/list?itemId=${state.id}`).then(res =>{
		console.log(res.data)
		state.chapterList = res.data
	})

}
onMounted(() => {
	if (UserLogin.isLogin) {
		init()
		http.get(`/item/view/${state.id}`).then((res) => {})
	}
})
</script>

<style scoped>


:deep(.el-card__header){
	font-size: 16px;
	font-weight: 500;
	color: #222;
	line-height: 22px;
	padding: 12px 24px;
	background: linear-gradient(90deg, #f5fcfc 0, #fcfbfa 100%);
	margin-bottom: 0;
	border-radius: 12px 12px 0 0;
}

.contacts {
	font-size: 20px;
	font-weight: 500;
	color: #222;
	line-height: 28px;
	display: flex;
	align-items: center;
}

.top {
	width: 100%;
	height: 435px;
	padding-top: 18px;
	padding-bottom: 20px;
	background: linear-gradient(to bottom, #f0fcff, #d9f2f8, #c2e8f1, #abdeea, #94d4e3);
	margin-bottom: 10px;
	overflow: hidden; /* 禁止内容超出范围 */
}

.name {
	padding: 0;
	line-height: 41px;
	height: 41px;

	h1 {
		font-size: 28px;
		font-weight: 600;
		color: #fff;
		line-height: 40px;
		margin-right: 30px;
		margin-top: 1px;
	}

	.salary {
		display: inline-block;
		font-size: 34px;
		font-family: kanzhun-Regular, kanzhun;
		color: #f26d49;
		line-height: 41px;
		height: auto;
		font-weight: 400;
		position: relative;
		top: -2px;
	}
}

.job-desc {
	color: white;

	span {
		padding-left: 15px;
	}
}

.btn {
	width: 100%;
	height: 45px;
}
</style>
